<template>
  <div class="wrapper" v-if="types">
    <header-nav :index_num="index_num"></header-nav>
    <div id="box">
      <h3>项目申报</h3>
      <!-- 导航 -->
      <div class="box">
        <div
          :class="sub == 0 ? 'color' : ''"
          :style="{
            'background-image':
              sub == 0 ? 'url(' + imgUrl.bg0 + ')' : 'url(' + imgUrl.bg1 + ')'
          }"
        >1 填写基本信息</div>
        <div
          :class="sub == 1 ? 'color' : ''"
          :style="{
            'background-image':
              sub == 1 ? 'url(' + imgUrl.bg0 + ')' : 'url(' + imgUrl.bg1 + ')'
          }"
        >2 填写详细信息</div>
      </div>
      <div class="form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="150px"
          class="demo-ruleForm"
          v-show="sub == 0"
        >
          <div style="display:flex">
            <el-form-item label="项目名称" prop="name" :error="errorMsg">
              <el-input v-model="ruleForm.name" style="width:350px"></el-input>
            </el-form-item>
            <el-form-item label="项目申报单位" prop="company">
              <!-- ruleForm.region -->
              <el-input v-model="ruleForm.company" style="width:350px" :disabled="true"></el-input>
            </el-form-item>
          </div>
          <div style="display:flex;">
            <el-form-item label="项目类型" prop="tid" style="margin-right:132px">
              <el-select v-model="ruleForm.tid" placeholder="请选择项目类型" @change="change">
                <el-option v-for="(type, index) in types" :key="index" :label="type" :value="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="项目落地区域" prop="rid" id="areamoren">
              <!-- ruleForm.region -->
              <el-select v-model="ruleForm.rid" placeholder="请选择项目落地区域" @change="change1">
                <el-option v-for="(list, index) in area" :key="index" :label="list" :value="index"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div style="display:flex">
            <el-form-item label="一级项目方向" prop="first_level" style="margin-right:132px">
              <el-select v-model="ruleForm.first_level" placeholder="请选择一级项目方向" @change="change2">
                <el-option
                  v-for="(list, index) in first_levels"
                  :key="index"
                  :label="list"
                  :value="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="二级项目方向" prop="secondary">
              <!-- ruleForm.region -->
              <el-input v-model="ruleForm.secondary" style="width:350px"></el-input>
            </el-form-item>
          </div>
          <div style="display:flex">
            <el-form-item label="三级项目方向" prop="fieldeara">
              <el-input v-model="ruleForm.fieldeara" style="width:350px"></el-input>
            </el-form-item>
            <el-form-item label="项目服务领域" prop="attribute">
              <!-- ruleForm.region -->
              <el-input v-model="ruleForm.attribute" style="width:350px"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="申报日期" required style="margin-right:125px">
            <el-col :span="11">
              <el-form-item prop="aterm">
                <el-date-picker
                  type="date"
                  placeholder="请选择申报日期"
                  v-model="ruleForm.aterm"
                  style="width: 70%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <!-- <el-col class="line" :span="2">-</el-col> -->
            <el-col :span="11">
              <el-form-item prop="fterm" label="截止日期" style="margin-left:-46px">
                <el-date-picker
                  type="date"
                  placeholder="请选择截止日期"
                  v-model="ruleForm.fterm"
                  style="width:125%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>

          <div style="display:flex">
            <el-form-item label="通讯地址" prop="postaladdress">
              <el-input v-model="ruleForm.postaladdress" style="width:350px"></el-input>
            </el-form-item>
            <el-form-item label="邮政编码" prop="postalcode">
              <!-- ruleForm.region -->
              <el-input v-model="ruleForm.postalcode" style="width:350px"></el-input>
            </el-form-item>
          </div>

          <div style="display:flex">
            <el-form-item label="电子邮箱" prop="pmail">
              <el-input v-model="ruleForm.pmail" style="width:350px"></el-input>
            </el-form-item>
            <el-form-item label="申报单位属性" prop="fax_tel">
              <!-- ruleForm.region -->
              <el-input v-model="ruleForm.fax_tel" style="width:350px"></el-input>
            </el-form-item>
          </div>

          <div style="display:flex">
            <el-form-item label="法定代表人" prop="plegal">
              <el-input v-model="ruleForm.plegal" style="width:350px"></el-input>
            </el-form-item>
            <el-form-item label="法人代码" prop="plcode">
              <!-- ruleForm.region -->
              <el-input v-model="ruleForm.plcode" style="width:350px"></el-input>
            </el-form-item>
          </div>

          <div style="display:flex">
            <el-form-item label="负责人姓名" prop="pname" style="margin-right:-69px">
              <el-input v-model="ruleForm.pname" style="width:150px"></el-input>
            </el-form-item>
            <el-form-item label="职务" prop="poster" style="margin-right:-39px">
              <!-- ruleForm.region -->
              <el-input v-model="ruleForm.poster" style="width:150px"></el-input>
            </el-form-item>
            <el-form-item label="办公电话" prop="poffice_tel" style="margin-right:-69px">
              <el-input v-model="ruleForm.poffice_tel" style="width:150px"></el-input>
            </el-form-item>
            <el-form-item label="手机" prop="aphone" style="margin-right:-69px">
              <!-- ruleForm.region -->
              <el-input v-model="ruleForm.aphone" style="width:150px"></el-input>
            </el-form-item>
          </div>

          <div style="display:flex;width:400px;">
            <el-form-item label="负责人姓名" prop="cname" style="margin-right:-69px">
              <el-input v-model="ruleForm.cname" style="width:150px"></el-input>
            </el-form-item>
            <el-form-item label="职务" prop="cpost" style="margin-right:-39px">
              <!-- ruleForm.region -->
              <el-input v-model="ruleForm.cpost" style="width:150px"></el-input>
            </el-form-item>
            <el-form-item label="办公电话" prop="coffice_tel" style="margin-right:-69px">
              <el-input v-model="ruleForm.coffice_tel" style="width:150px"></el-input>
            </el-form-item>
            <el-form-item label="手机" prop="cphone" style="margin-right:-69px">
              <!-- ruleForm.region -->
              <el-input v-model="ruleForm.cphone" style="width:150px"></el-input>
            </el-form-item>
          </div>
          <!-- <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button> -->
          <el-form-item>
            <div class="btn" @click="submitForm('ruleForm')" style="cursor:pointer">下一页</div>

            <!-- <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>-->
          </el-form-item>
        </el-form>
      </div>
      <el-form
        :model="ruleForm1"
        :rules="rules1"
        ref="ruleForm1"
        label-width="150px"
        class="demo-ruleForm"
        v-show="sub == 1"
      >
        <el-form-item label="项目主责单位" prop="prespo">
          <el-input v-model="ruleForm1.prespo"></el-input>
        </el-form-item>
        <div style="display:flex">
          <el-form-item label="通讯地址" prop="respoadd">
            <el-input v-model="ruleForm1.respoadd" style="width:350px"></el-input>
          </el-form-item>
          <el-form-item label="邮政编码" prop="respopcode">
            <!-- ruleForm.region -->
            <el-input v-model="ruleForm1.respopcode" style="width:350px"></el-input>
          </el-form-item>
        </div>

        <div style="display:flex">
          <el-form-item label="电子邮箱" prop="respomail">
            <el-input v-model="ruleForm1.respomail" style="width:350px"></el-input>
          </el-form-item>
          <el-form-item label="传真电话" prop="respophone">
            <!-- ruleForm.region -->
            <el-input v-model="ruleForm1.respophone" style="width:350px"></el-input>
          </el-form-item>
        </div>

        <div style="display:flex">
          <el-form-item label="负责人姓名" prop="respopname" style="margin-right:-69px">
            <el-input v-model="ruleForm1.respopname" style="width:150px"></el-input>
          </el-form-item>
          <el-form-item label="职务" prop="respopost" style="margin-right:-69px">
            <!-- ruleForm.region -->
            <el-input v-model="ruleForm1.respopost" style="width:150px"></el-input>
          </el-form-item>
          <el-form-item label="办公电话" prop="respoophone" style="margin-right:-69px">
            <el-input v-model="ruleForm1.respoophone" style="width:150px"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="respoptel" style="margin-right:-69px">
            <!-- ruleForm.region -->
            <el-input v-model="ruleForm1.respoptel" style="width:150px"></el-input>
          </el-form-item>
        </div>

        <div style="display:flex;width:400px;">
          <el-form-item label="联系人姓名" prop="respocname" style="margin-right:-69px">
            <el-input v-model="ruleForm1.respocname" style="width:150px"></el-input>
          </el-form-item>
          <el-form-item label="职务" prop="respocpost" style="margin-right:-69px">
            <!-- ruleForm.region -->
            <el-input v-model="ruleForm1.respocpost" style="width:150px"></el-input>
          </el-form-item>
          <el-form-item label="办公电话" prop="respocophone" style="margin-right:-69px">
            <el-input v-model="ruleForm1.respocophone" style="width:150px"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="respoctel" style="margin-right:-69px">
            <!-- ruleForm.region -->
            <el-input v-model="ruleForm1.respoctel" style="width:150px"></el-input>
          </el-form-item>
        </div>
        <div class="xx">
          <h5>二、申报单位简介</h5>
          <div class="rich">
            <aboutUs @aboutUs="aboutUs" :aboutUsVal="ruleForm.decldes" :writeable="true"></aboutUs>
          </div>
        </div>
        <div class="xx">
          <h5>三、项目简介</h5>
          <div class="rich">
            <ProjectBrief
              @projectBrief="projectBrief"
              :projectBriefVal="ruleForm.prodes"
              :writeable="true"
            ></ProjectBrief>
          </div>
        </div>
        <div class="xx">
          <h5>四、项目论证</h5>
          <h3>(一) 项目实施的必要性、可行性</h3>
          <div class="rich">
            <ProjectAssessment
              @projectAssessment="projectAssessment"
              :projectAssessmentVal="ruleForm.prodemo"
              :writeable="true"
            ></ProjectAssessment>
          </div>
          <h3>
            (二)
            项目实施的已有基础、具体方法和途径及进度安排、预期效果及完成时间
          </h3>
          <p>1.项目实施的已有基础</p>
          <article>〔说明：包括但不限于项目实施已有的相关经验或有助于项目实施的资源支持等。〕</article>
          <div class="rich">
            <ExistingBasis
              @existingBasis="existingBasis"
              :existingBasisVal="ruleForm.prodemojc"
              :writeable="true"
            ></ExistingBasis>
          </div>
          <p>2.具体方法和途径</p>
          <article>〔说明：包括项目实施的具体方式、途径。明确项目的具体组成内容（子项目、各类服务等），每类、每次活动的具体内容、形式、对象、次数、人数等。〕</article>
          <div class="rich">
            <MethodsWay
              @methodsWay="methodsWay"
              :methodsWayVal="ruleForm.prodemotj"
              :writeable="true"
            ></MethodsWay>
          </div>
          <p>3.进度安排</p>
          <article>〔说明：可单独作为一部分，也可与“具体方法和途径”一并细化到子项目中说明。建议时间单元为月，不建议简单表述为“年内”、“上半年”、“下半年”、“第*季度”等。〕</article>
          <div class="rich">
            <scheduling
              @scheduling="scheduling"
              :schedulingVal="ruleForm.prodemojd"
              :writeable="true"
            ></scheduling>
          </div>
          <p>4.预期效果</p>
          <article>〔说明：具体明确项目实施所要达到的目标或预期的效果。〕</article>
          <div class="rich">
            <DesiredEffect
              @desiredEffect="desiredEffect"
              :desiredEffectVal="ruleForm.prodemoxg"
              :writeable="true"
              useid=0
            ></DesiredEffect>
          </div>
          <p>5.项目团队及分工</p>
          <article>〔说明：包括项目实施的组织管理机构组成，各子项目或各项服务活动的具体承接单位和负责人，各有关协作单位等。要把可能引起转包怀疑的所有事项交代清楚，避免在检查、审计和评估中产生误解。〕</article>
          <div class="rich">
                <!-- <DesiredEffect
              @desiredEffect="divisionLabor"
              :divisionLaborVal="ruleForm.prodemofg"
              :writeable="true"
              useid=0
            ></DesiredEffect> -->


            <DivisionLabor
              @divisionLabor="divisionLabor"
              :divisionLaborVal="ruleForm.prodemofg"
              :writeable="true"
            ></DivisionLabor>
          </div>
          <h3>(三) 项目实施涵盖的范围、实施的规模、服务的人群，创新之处等</h3>
          <div class="rich">
            <cover @cover="cover" :coverVal="ruleForm.prodemotwo" :writeable="true"></cover>
          </div>
        </div>
        <div class="xx">
          <h5>五、经费预算</h5>
          <div class="rich">
            <RichTextOne @quillVal="quillVal" :initialTextVal="ruleForm.funds" :writeable="true"></RichTextOne>
          </div>
        </div>
        <div class="xxx">
          <h5 style="font-size:20px">六、申报单位承诺</h5>
          <div class="plpl" style="margin-top:32px;">
            <!-- {{ruleForm.thff}} -->
            <!--  :class="ruleForm.thff ? 'iconfont ic': 'iconfont'" -->
            <span
              @click="thf()"

              class="iconfont icon-fuxuankuang_xuanzhong"
              :class="ifagree"
            ></span>
            <label>我们确认项目申报内容的真实性,并愿意承担相应的责任</label>
          </div>
        </div>
        <div class="xxx">
          <h5 style="font-size:20px">七、项目主责单位意见</h5>
          <!-- <p  class="yulantext" v-if="picture.length" @click="yulana1(picture[0])" style="left:507px;top:95px">预览</p> -->
          <div class="xxxx">
            <template>
              <el-upload
                class="upload-demo"
                :action="$upload"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="successUpload"
                :before-remove="beforeRemove"
                multiple
                :limit="10"
                :on-exceed="handleExceed"
                :file-list="fileLists"
                accept=".pdf"
              >
                <el-button size="small" type="primary">上传文件</el-button>
                <!-- <span slot="tip" class="el-upload__tip">只能上传一张不同的图片</span> -->
              </el-upload>
            </template>
          </div>
        </div>
        <div class="xxx" style="margin-top: 5px;" v-if="routeParam == 1">
          <h5 style="font-size:20px">
            八、项目申报书（确认版）
            <!-- <span  style="font-size:10px;color:red;font-weight:bold">*</span> -->
            </h5>

          <!-- <p  class="yulantext" v-if="picture.length" @click="yulana1(picture[0])" style="left:507px;top:95px">预览</p> -->
          <div class="xxxx">
            <template>
              <el-upload
                class="upload-demo"
                :action="$upload"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="successUploadDeclare"
                :before-remove="beforeRemove"
                :on-exceed="handleExceedOne"
                :limit="1"
                :file-list="fileListsD"
                accept=".pdf"
              >
                <el-button size="small" type="primary">上传文件</el-button>
                <!-- <span slot="tip" class="el-upload__tip">只能上传一张不同的图片</span> -->
              </el-upload>
            </template>
          </div>
        </div>
        <div class="xxx" style="margin-top: 5px;" v-if="routeParam == 1">
          <h5 style="font-size:20px">九、实施方案</h5>
          <!-- <p  class="yulantext" v-if="picture.length" @click="yulana1(picture[0])" style="left:507px;top:95px">预览</p> -->
          <div class="xxxx">
            <template>
              <el-upload
                class="upload-demo"
                :action="$upload"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="successUploadImplementation"
                :before-remove="beforeRemove"
                :on-exceed="handleExceedOne"
                :limit="1"
                :file-list="fileListsI"
                accept=".pdf"
              >
                <el-button size="small" type="primary">上传文件</el-button>
                <!-- <span slot="tip" class="el-upload__tip">只能上传一张不同的图片</span> -->
              </el-upload>
            </template>
          </div>
        </div>
        <el-form-item>
          <div class="ll">
            <button type="button" @click="next(0)" style="cursor:pointer"> 上一页</button>
            <button type="button" @click="submitForm('ruleForm1',1)" style="cursor:pointer">保存</button>
            <button type="button" @click="submitForm('ruleForm',2)" class="tj" style="cursor:pointer">提交</button>
          </div>
          <!-- <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>-->
        </el-form-item>
      </el-form>
    </div>
    <footer-nav class="footer"></footer-nav>
  </div>
</template>

<script>
const path = require("path");
const files = require.context("@/components", false, /\.vue$/);
const modules = {};
files.keys().forEach(key => {
  const name = path.basename(key, ".vue");
  modules[name] = files(key).default || files(key);
});
var preD = function(e) {
  e.preventDefault();
};
export default {
  components: modules,
  props: {},
  data() {
    return {
      imageUrl: "",
      imageUrl1: "",
      imageUrl2: "",
      imageUrl3: "",
      imageUrl4: "",
      idProject: "",
      fileurl: "",
      fileurl1: "",
      fileurl2: "",
      fileurl3: "",
      fileurl4: "",
      filename: "",
      filename1: "",
      filename2: "",
      filename3: "",
      filename4: "",
      routeParam:0,
      ruleForm: {
        name: "",
        company: "",
        tid: "",
        rid: "",
        first_level: "",
        secondary: "",
        fieldeara: "",
        attribute: "",
        aterm: "",
        fterm: "",
        postaladdress: "",
        postalcode: "",
        pmail: "",
        fax_tel: "",
        plegal: "",
        plcode: "",
        pname: "",
        poster: "",
        poffice_tel: "",
        aphone: "",
        cname: "",
        cpost: "",
        coffice_tel: "",
        cphone: "",

        decldes: "",
        prodes: "",
        party_id: null,
        prodemo: "",
        prodemojc: "",
        prodemotj: "",
        prodemojd: "",
        prodemoxg: "",
        prodemofg: "",
        prodemotwo: "",
        funds: "",
        proimages: "",
        status: 0,
        protime: "",
        thff: false,
        declare:'',
        implementation:''
      },
      rules1: {
        prespo: [
          { required: true, message: "请输入项目主责单位", trigger: "blur" }
        ],
        respoadd: [
          { required: true, message: "请输入通讯地址", trigger: "blur" }
        ],
        respopcode: [
          { required: true, message: "请输入邮政编码", trigger: "blur" }
        ],
        respomail: [
          {
            required: true, //是否必填
            message: "请输入邮箱地址", //错误提示信息
            trigger: "blur" //检验方式（blur为鼠标点击其他地方，）
          },
          {
            type: "email", //要检验的类型（number，email，date等）
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        respopname: [
          { required: true, message: "请输入负责人姓名", trigger: "blur" }
        ],
        respopost: [
          { required: true, message: "请输入负责人职务", trigger: "blur" }
        ],
        respoophone: [
          { required: true, message: "请输入负责人办公电话", trigger: "blur" }
        ],

        respocname: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" }
        ],
        respocpost: [
          { required: true, message: "请输入联系人职务", trigger: "blur" }
        ],
        respocophone: [
          { required: true, message: "请输入联系人办公电话", trigger: "blur" }
        ],

        respoptel: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[34578]\d{9}$/, //可以写正则表达式呦呦呦
            message: "请输入正确的手机号",
            trigger: "change"
          }
        ],
        respoctel: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[34578]\d{9}$/, //可以写正则表达式呦呦呦
            message: "请输入正确的手机号",
            trigger: "change"
          }
        ]
      },
      rules: {
        name: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
        aterm:[{type:'date',required:true,message:'请输入申报时间',trigger:'change'}],
        fterm:[{type:'date',required:true,message:'请输入截止时间',trigger:'change'}],
        tid: [{ required: true, message: "请选择项目类型", trigger: "change" }],
        rid: [
          { required: true, message: "请选择项目落地区域", trigger: "change" }
        ],
        company: [
          { required: true, message: "请输入项目申报单位", trigger: "blur" }
        ],
        first_level: [
          { required: true, message: "请输入一级项目方向", trigger: "blur" }
        ],
        secondary: [
          { required: true, message: "请输入二级项目方向", trigger: "blur" }
        ],
        fieldeara: [
          { required: true, message: "请输入三级项目方向", trigger: "blur" }
        ],
        attribute: [
          { required: true, message: "请输入项目服务领域", trigger: "blur" }
        ],
        postaladdress: [
          { required: true, message: "请输入通讯地址", trigger: "blur" }
        ],
        postalcode: [
          { required: true, message: "请输入邮政编码", trigger: "blur" }
        ],
        pmail: [
          {
            required: true, //是否必填
            message: "请输入邮箱地址", //错误提示信息
            trigger: "blur" //检验方式（blur为鼠标点击其他地方，）
          },
          {
            type: "email", //要检验的类型（number，email，date等）
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        plegal: [
          { required: true, message: "请输入法定代表人", trigger: "blur" }
        ],
        plcode: [
          { required: true, message: "请输入法人代码", trigger: "blur" }
        ],
        pname: [
          { required: true, message: "请输入负责人姓名", trigger: "blur" }
        ],
        poster: [{ required: true, message: "请输入职务", trigger: "blur" }],
        poffice_tel: [
          { required: true, message: "请输入办公电话", trigger: "blur" }
        ],
        aphone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[34578]\d{9}$/, //可以写正则表达式呦呦呦
            message: "请输入正确的手机号",
            trigger: "change"
          }
        ],
        cname: [
          { required: true, message: "请输入负责人姓名", trigger: "blur" }
        ],
        cpost: [{ required: true, message: "请输入职务", trigger: "blur" }],
        coffice_tel: [
          { required: true, message: "请输入办公电话", trigger: "blur" }
        ],
        cphone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[34578]\d{9}$/, //可以写正则表达式呦呦呦
            message: "请输入正确的手机号",
            trigger: "change"
          }
        ],
        // aterm: [
        //   {
        //     type: "date",
        //     required: true,
        //     message: "请选择日期",
        //     trigger: "change"
        //   }
        // ],
        cphone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[34578]\d{9}$/, //可以写正则表达式呦呦呦
            message: "请输入正确的手机号",
            trigger: "change"
          }
        ]

        // aterm: [
        //   {
        //     type: "date",
        //     required: true,
        //     message: "请选择日期",
        //     trigger: "change"
        //   }
        // ],
        // fterm: [
        //   {
        //     type: "date",
        //     required: true,
        //     message: "请选择时间",
        //     trigger: "change"
        //   }
        // ]
      },
      errorMsg: "",
      index_num: 2,
      sub: 0,
      bgData: {},
      initialTextVal: "",
      initialText: "",
      aboutUsText: "",
      aboutUsVal: "",
      projectBriefVal: "",
      projectBriefText: "",
      projectAssessmentVal: "",
      projectAssessmentText: "",
      existingBasisVal: "",
      existingBasisText: "",
      methodsWayVal: "",
      methodsWayText: "",
      schedulingVal: "",
      schedulingText: "",
      desiredEffectVal: "",
      desiredEffectText: "",
      divisionLaborVal: "",
      divisionLaborText: "",
      coverVal: "",
      coverText: "",
      thff: false,
      imgUrl: {
        bg0: require("../../../static/img/bg0.png"),
        bg1: require("../../../static/img/bg1.png"),
        xa: require("../../../static/img/xa.png")
      },
      fileLists: [],
      fileListsD: [],
      fileListsI: [],
      popupStatus: false,
      first_levels: [],
      types: [],
      area: [],
      name: "",
      company: "",
      tid: "",
      rid: "",
      first_level: "",
      secondary: "",
      fieldeara: "",
      attribute: "",
      aterm: "",
      fterm: "",
      postaladdress: "",
      postalcode: "",
      pmail: "",
      fax_tel: "",
      plegal: "",
      plcode: "",
      pname: "",
      poster: "",
      poffice_tel: "",
      aphone: "",
      cname: "",
      cpost: "",
      coffice_tel: "",
      cphone: "",
      prespo: "",
      respoadd: "",
      respopcode: "",
      respomail: "",
      respophone: "",
      respoctel: "",
      respopname: "",
      respopost: "",
      respoophone: "",
      respoptel: "",
      respocname: "",
      respocpost: "",
      respocophone: "",
      decldes: "",
      prodes: "",
      prodemo: "",
      prodemojc: "",
      prodemotj: "",
      prodemojd: "",
      prodemoxg: "",
      prodemofg: "",
      prodemotwo: "",
      funds: "",
      proimages: "",
      subStatus: 0,
      picture: [],
      pictureD: [],
      pictureI: [],
      pid: 0,
      ifagree:'',
      ruleForm1: {
        prespo: "",
        respoadd: "",
        respopcode: "",
        respomail: "",
        respophone: "",
        respopname: "",
        respopost: "",
        respoophone: "",
        respoptel: "",
        respocname: "",
        respocpost: "",
        respocophone: "",
        respoctel: "",

      },
      imgs: []
      // imgData: {
      //   accept: "image/gif, image/jpeg, image/png, image/jpg"
      // }
    };
  },
  computed: {},
  watch: {
    popupStatus(val) {
      if (val) {
        document.body.style.overflow = "hidden";
        document.addEventListener("touchmove", preD, {
          passive: false
        }); /** 禁止页面滑动 */
      } else {
        document.body.style.overflow = ""; /** 出现滚动条 */
        document.removeEventListener("touchmove", preD, { passive: false });
      }
    }
  },
  methods: {
            yulana1(file){
      console.log(this.picture,111)
      // console.log(this.fileLists[0])
      window.open(this.picture[0].url)
      return
    },
    change(e) {
      this.tid = e;
    },
    change1(e) {
      this.rid = e;
    },
    change2(e) {
      this.first_level = e;
    },
    beforeAvatarUpload() {},
    handleAvatarSuccess(response, file, fileList) {
      this.fileid = file.response.data.id;
      this.filename = file.response.data.name;
      this.fileurl = file.response.data.url;
      console.log(file);
    },
    next(e) {
      this.sub = e;
    },
    successUpload(response, file, fileList) {
      this.picture.push({
        name: file.name,
        url: file.response.data.url
      });
      console.log(response,1)
      console.log(file,2)
      console.log(this.picture)
    },
    successUploadDeclare(response, file, fileList) {//项目申报书
      this.pictureD.push({
        name: file.name,
        url: file.response.data.url
      });
    },
    successUploadImplementation(response, file, fileList) {//实施方案
      this.pictureI.push({
        name: file.name,
        url: file.response.data.url
      });
    },
    successUploadTwo(response, file, fileList) {
      this.fileid = file.response.data.id;
      this.filename = file.response.data.name;
      this.fileurl = file.response.data.url;
      console.log(file);
    },
    successUploadThree(response, file, fileList) {
      this.fileid = file.response.data.id;
      this.filename = file.response.data.name;
      this.fileurl = file.response.data.url;
      console.log(file);
    },
    handleRemove(file, fileList) {
      this.picture.forEach(element => {
        if (file.name === element.name) {
          this.picture.splice(element, 1);
        }
      });
    },
    handlePreview(file) {
      console.log(this.picture);
      // console.log(file.response.data.url)
       window.open(this.picture[0].url); //blob格式地址
      //    if (!!window.ActiveXObject || "ActiveXObject" in window) {
      //   alert("推荐谷歌进行文件预览");
      // } else {
      //   window.open(file.response.data.url); //blob格式地址
      // }
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 10 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name} ?`);
    },
    handleAvatarSuccess1(res, file) {
      console.log(file);
      this.fileurl1 = file.response.data.url;
      this.imageUrl1 = "/index/timg.jpg";
      this.filename1 = file.response.data.name;
      // this.imageUrl1 = URL.createObjectURL(file.raw);
      //         if(file.response.data.extension=="docx"){
      // this.imageUrl1 = "../../../src/static/img/word.png";
      //     }else if(file.response.data.extension=="xls"){
      //       this.imageUrl1 = "../../../src/static/img/excel.png";
      //     }else if(file.response.data.extension=="pptx"){
      //       this.imageUrl1  = "../../../src/static/img/ppt.png";
      //     }else if(file.response.data.extension=="pdf"){
      //       this.imageUrl1 = "../../../src/static/img/pdf.jpg";
      //     }
    },

    handleAvatarSuccess2(res, file) {
      console.log(file);
      this.fileurl2 = file.response.data.url;
      this.imageUrl2 = "/index/timg.jpg";
      this.filename2 = file.response.data.name;
      // this.imageUrl2 = URL.createObjectURL(file.raw);
      //         if(file.response.data.extension=="docx"){
      // this.imageUrl2 = "../../../src/static/img/word.png";
      //     }else if(file.response.data.extension=="xls"){
      //       this.imageUrl2 = "../../../src/static/img/excel.png";
      //     }else if(file.response.data.extension=="pptx"){
      //       this.imageUrl2 = "../../../src/static/img/ppt.png";
      //     }else if(file.response.data.extension=="pdf"){
      //       this.imageUrl2 = "../../../src/static/img/pdf.jpg";
      //     }
    },
    handleAvatarSuccess3(res, file) {
      console.log(file);
      this.fileurl3 = file.response.data.url;
      this.imageUrl3 = "/index/timg.jpg";
      this.filename3 = file.response.data.name;
      // this.imageUrl3 = URL.createObjectURL(file.raw);
      //         if(file.response.data.extension=="docx"){
      // this.imageUrl3 = "../../../src/static/img/word.png";
      //     }else if(file.response.data.extension=="xls"){
      //       this.imageUrl3 = "../../../src/static/img/excel.png";
      //     }else if(file.response.data.extension=="pptx"){
      //       this.imageUrl3 = "../../../src/static/img/ppt.png";
      //     }else if(file.response.data.extension=="pdf"){
      //       this.imageUrl3 = "../../../src/static/img/pdf.jpg";
      //     }
    },
    handleAvatarSuccess4(res, file) {
      console.log(file);
      this.fileurl4 = file.response.data.url;
      // this.imageUrl4 = URL.createObjectURL(file.raw);
      this.imageUrl4 = "/index/timg.jpg";
      this.filename4 = file.response.data.name;
      //         if(file.response.data.extension=="docx"){
      // this.imageUrl4 = "../../../src/static/img/word.png";
      //     }else if(file.response.data.extension=="xls"){
      //       this.imageUrl4 = "../../../src/static/img/excel.png";
      //     }else if(file.response.data.extension=="pptx"){
      //       this.imageUrl4 = "../../../src/static/img/ppt.png";
      //     }else if(file.response.data.extension=="pdf"){
      //       this.imageUrl4 = "../../../src/static/img/pdf.jpg";
      //     }
    },
    submitForm(formName, a) {

      this.$refs[formName].validate(valid => {
        if (valid) {
          this.next(1);
          if (a == 1) {
            this.submit(0);
          } else if (a == 2) {
            this.submit(1);
          }
        } else {
          console.log("error submit!!");
          this.$alert("请完善资料", "提示", {
            confirmButtonText: "确定",
            callback: action => {
              // this.$message({
              //   type: 'info',
              //   message: ''
              // });
            }
          });
          return false;
        }
      });
    },
    successUpload(response, file, fileList) {
      this.picture.push({
        name: file.name,
        url: file.response.data.url
      });
    },
    handleRemove(file, fileList) {
      this.picture.forEach(element => {
        if (file.name === element.name) {
          this.picture.splice(element, 1);
        }
      });
    },
    // handlePreview(file) {
    //   console.log(file);
    //    console.log(file.response.data.url)
    //    window.open(file.response.data.url);
    // },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 10 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    handleExceedOne(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name} ?`);
    },
    /** 获取富文本内容 */
    aboutUs(data) {
      this.ruleForm.decldes = data;
    },
    projectBrief(data) {
      this.ruleForm.prodes = data;
    },
    projectAssessment(data) {
      this.ruleForm.prodemo = data;
    },
    existingBasis(data) {
      this.ruleForm.prodemojc = data;
    },
    methodsWay(data) {
      this.ruleForm.prodemotj = data;
    },
    scheduling(data) {
      this.ruleForm.prodemojd = data;
    },
    desiredEffect(data) {
      this.ruleForm.prodemoxg = data;
      console.log(data,"ok")
    },
    divisionLabor(data) {
      console.log(data,1)
      this.ruleForm.prodemofg = data;
    },
    cover(data) {
      this.ruleForm.prodemotwo = data;
    },
    quillVal(data) {
      this.ruleForm.funds = data;
    },
    /** 申报单位承诺 */
    thf() {
      this.$set(this.ruleForm, "thff", !this.ruleForm.thff);
      // this.ruleForm.thff = !this.ruleForm.thff;
      // if(this.ruleForm.thff)
      this.ifagree=this.ruleForm.thff?'ic':''
      // console.log(this.ruleForm.thff);
      // console.log(this.ifagree,960)
    },
    /** 下一步 */
    // btn(index) {
    //   let s = this.sub;
    //   s = index;
    //   // this.sub = s
    //   this.assignment(this.bgData);
    //   let regd = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/;
    //   let regs = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
    //   // console.log( this.bgData)
    //   // console.log(this.name)
    //   // console.log(this.company)
    //   // console.log(this.tid)
    //   // console.log(this.rid)
    //   // console.log(this.first_level)
    //   if (
    //     this.name === "" ||
    //     this.company === "" ||
    //     this.tid === "" ||
    //     this.rid === "" ||
    //     this.first_level === "" ||
    //     this.secondary === "" ||
    //     this.fieldeara === "" ||
    //     this.attribute === "" ||
    //     this.aterm === "" ||
    //     this.fterm === "" ||
    //     this.postaladdress === "" ||
    //     this.postalcode === "" ||
    //     this.pmail === "" ||
    //     this.plegal === "" ||
    //     this.plcode === "" ||
    //     this.pname === "" ||
    //     this.poster === "" ||
    //     this.poffice_tel === "" ||
    //     this.aphone === "" ||
    //     this.cname === "" ||
    //     this.cpost === "" ||
    //     this.coffice_tel === "" ||
    //     this.cphone === ""
    //   ) {
    //     alert("请认真核对填写内容完整性！");
    //     return false;
    //   } else if (this.aterm > this.fterm) {
    //     alert("截止日期应比申请日期晚");
    //     return false;
    //   } else if (
    //     !regd.test(this.bgData.poffice_tel) ||
    //     !regd.test(this.bgData.coffice_tel)
    //   ) {
    //     alert("请填写正确的电话号码！");
    //     return false;
    //   } else if (
    //     !regs.test(this.bgData.aphone) ||
    //     !regs.test(this.bgData.cphone)
    //   ) {
    //     alert("请填写正确的手机号码！");
    //     return false;
    //   } else {
    //     this.sub = s;
    //   }
    // },
    /** 保存和提交 */
    submit(index) {
      if(index==0){
            this.$confirm("此操作将保存当前填写的内容, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (this.ruleForm.thff) {
            this.ruleForm.party_id = sessionStorage.getItem("party_id");
            this.ruleForm.proimages = JSON.stringify(this.picture);
            this.ruleForm.declare = JSON.stringify(this.pictureD);
            this.ruleForm.implementation = JSON.stringify(this.pictureI);
            //  this.ruleForm.proimages = JSON.stringify(this.fileLists);
            console.log(this.picture,"picture");
            console.log(JSON.stringify(this.picture))
            for (let m in this.ruleForm1) {
              this.ruleForm[m] = this.ruleForm1[m];
            }
            console.log(this.ruleForm.proimages);
            if(this.picture.length == 0 || this.picture == ''){
              this.$message({
                type: "info",
                message: "请上传项目主责单位意见"
              });
              return false
            }else{
              console.log(this.ruleForm);
              this.submitYes(index);
            }
            //this.submitYes(index);s
          } else {
            this.$message({
              type: "info",
              message: "请同意申报单位承诺"
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消保存"
          });
        });
      }else if(index==1){
            this.$confirm("此操作将提交到项目申报中心，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          console.log(111)
          if (this.ruleForm.thff) {
            this.ruleForm.party_id = sessionStorage.getItem("party_id");
            this.ruleForm.proimages = JSON.stringify(this.picture);
            this.ruleForm.declare = JSON.stringify(this.pictureD);
            this.ruleForm.implementation = JSON.stringify(this.pictureI);
            for (let m in this.ruleForm1) {
              this.ruleForm[m] = this.ruleForm1[m];
            }
            if(this.picture.length == 0 || this.picture == ''){
              this.$message({
                type: "info",
                message: "请上传项目主责单位意见"
              });
              return false
            }else{
              console.log(this.ruleForm);
              this.submitYes(index);
            }
            console.log(this.picture,'picture')
            console.log(this.fileLists);

            console.log(this.ruleForm);
          } else {
            this.$message({
              type: "info",
              message: "请同意申报单位承诺"
            });
          }
        })
        .catch(() => {
          console.log(400)
          this.$message({
            type: "info",
            message: "已取消提交"
          });
        });
      }

    },
    /** 申报项目 */
    submitYes(e) {
      // this.popupStatus = false;
      let _this = this;
      if (e == 1) {
        this.ruleForm.subStatus = 1;
      } else {
        this.ruleForm.subStatus = 1000;
      }
      this.$http({
        method: "post",
        url: "v1/project/apply",
        data: this.ruleForm
      })
        .then(res => {
          console.log(res);
          if (res.data.code === 200) {
            if (res.data.data.code === 200) {
              if(e==1){
                this.$message({
                type: "success",
                message: "提交成功!"
              });
              }else{
                 this.$message({
                type: "success",
                message: "保存成功!"
              });
              }

              _this.proimages = "";
              setTimeout(() => {
                _this.$router.push({
                  name: "project"
                });
              }, 3000);
            } else {
              this.$message({
                type: "info",
                message: res.data.data.msg
              });
            }
          } else {
            this.$message({
              type: "info",
              message: res.data.data.msg
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    /** 获取下拉框的数据 */
    getData() {
      let _this = this;
      this.$http({
        method: "get",
        url: "v1/project/get-info",
        data: {}
      })
        .then(res => {
          if (res.data.code === 200) {
            _this.types = res.data.data.type;
            _this.area = res.data.data.area;
            _this.first_levels = res.data.data.first_level;

            // _this.area[""]="请选择项目落地区域"
            delete _this.area[""]
            console.log(_this.area,1665)
            if (this.$route.query.id) {
              let id = this.$route.query.id;
              this.getDataDetails(id);
            }
          } else {
            _this.$message.error("请求数据有问题！");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    /** 判断是否有权限进行项目申报 */
    status() {
      let id = sessionStorage.id;
      let _this = this;
      this.$http({
        method: "post",
        url: "v1/society/get-status",
        data: { id: id }
      })
        .then(res => {
          if (res.data.code === 200) {
            _this.ruleForm.company = res.data.data.name;
            if (res.data.data.status === 0) {
              alert("您当前社会组织状态为：活动异常，请与主管单位联系审核！");
              _this.$router.push({
                name: "project"
              });
            } else if (res.data.data.status === 3) {
              alert("您当前社会组织状态为：活动异常，请与主管单位联系审核！");
              _this.$router.push({
                name: "project"
              });
            } else if (res.data.data.status === 4) {
              alert("项目申报暂未开始！");
              _this.$router.push({
                name: "project"
              });
            } else {
              _this.getData();
            }
          } else {
            _this.$message.error("请求数据有问题！");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    /** 为提交时的赋值操作 */
    assignment(data) {
      this.name = data.name;
      // this.company = data.company
      for (var prop in this.types) {
        if(data.rid!=''){
             if (data.tid === this.types[prop]) {
          this.tid = prop;
        }
        }

      }
      for (var prop in this.area) {
        if (data.rid === this.area[prop]) {
          this.rid = prop;
        }
      }
      // this.bgData.area.forEach((item, index) => {
      //   if (data.rid === item) {
      //     this.rid = parseInt(index)
      //   }
      // })
      for (let prop in this.first_levels) {
        if (data.first_level === this.first_levels[prop]) {
          this.first_level = prop;
        }
      }
      this.secondary = data.secondary;
      this.fieldeara = data.fieldeara;
      this.attribute = data.attribute;
      this.aterm = data.aterm;
      this.fterm = data.fterm;
      this.postaladdress = data.postaladdress;
      this.postalcode = data.postalcode;
      this.pmail = data.pmail;
      this.fax_tel = data.fax_tel;
      this.plegal = data.plegal;
      this.plcode = data.plcode;
      this.pname = data.pname;
      this.poster = data.poster;
      this.poffice_tel = data.poffice_tel;
      this.aphone = data.aphone;
      this.cname = data.cname;
      this.cpost = data.cpost;
      this.coffice_tel = data.coffice_tel;
      this.cphone = data.cphone;
      this.prespo = data.prespo;
      this.respoadd = data.respoadd;
      this.respopcode = data.respopcode;
      this.respomail = data.respomail;
      this.respophone = data.respophone;
      this.respopname = data.respopname;
      this.respopost = data.respopost;
      this.respoophone = data.respoophone;
      this.respoptel = data.respoptel;
      this.respocname = data.respocname;
      this.respocpost = data.respocpost;
      this.respocophone = data.respocophone;
      this.respoctel = data.respoctel;
      this.aboutUsVal = data.decldes;
      this.aboutUsText = data.decldes;
      this.projectBriefVal = data.prodes;
      this.projectBriefText = data.prodes;
      this.projectAssessmentVal = data.prodemo;
      this.projectAssessmentText = data.prodemo;
      this.existingBasisVal = data.prodemojc;
      this.existingBasisText = data.prodemojc;
      this.methodsWayVal = data.prodemotj;
      this.methodsWayText = data.prodemotj;
      this.schedulingVal = data.prodemojd;
      this.schedulingText = data.prodemojd;
      this.desiredEffectVal = data.prodemoxg;
      this.desiredEffectText = data.prodemoxg;
      this.divisionLaborVal = data.prodemofg;
      this.divisionLaborText = data.prodemofg;
      this.coverVal = data.prodemotwo;
      this.coverText = data.prodemotwo;
      this.initialTextVal = data.funds;
      this.initialText = data.funds;

      this.pid = data.id;

      if (data.proimages) {
        let imgs = JSON.parse(data.proimages);
        this.fileLists = imgs;
      }
      if (data.declare) {
        let imgO = JSON.parse(data.declare);
        this.fileListsD = imgO;
      }
      if (data.implementation) {
        let imgT = JSON.parse(data.implementation);
        this.fileListsI = imgT;
      }
      this.picture = this.fileLists;
      this.pictureD = this.fileListsD;
      this.pictureI = this.fileListsI;
    },
    getDataDetails(id) {
      this.$http({
        method: "post",
        url: "v1/project/details",
        data: {
          id: id
        }
      })
        .then(res => {
          if (res.data.data.code === 200) {
            this.bgData = res.data.data.data.ProjectDetails;
            //初筛通过-立项-待分配专家小组 状态后显示八，九
            this.routeParam = (this.bgData.status>5&&this.bgData.status!=11&&this.bgData.status!=1000)?1:0;
            this.ruleForm = res.data.data.data.ProjectDetails;
            // console.log(this.ruleForm.proimages)
            // this.fileListsD.push({url:this.ruleForm.declare,name:'11'});
            // this.fileListsI.push({url:this.ruleForm.implementation});
            this.ruleForm.thff=true
            this.ifagree=this.ruleForm.thff?'ic':''
            for (let i in this.ruleForm1) {
              this.ruleForm1[i] = this.ruleForm[i];
            }
            for (let i in this.types) {
              // console.log(this.types[i])
              if (this.types[i] == this.ruleForm.tid) {
                this.ruleForm.tid = i;
                // console.log(this.ruleForm.tid)
              }
            }
            for (let i in this.area) {
              // console.log(this.types[i])
              if (this.area[i] == this.ruleForm.rid) {
                this.ruleForm.rid = i;
                // console.log(this.ruleForm.rid)
              }
            }
            for (let i in this.first_levels) {
              // console.log(this.types[i])
              if (this.first_levels[i] == this.ruleForm.first_level) {
                this.ruleForm.first_level = i;
                // console.log(this.ruleForm.first_level)
              }
            }
            this.assignment(this.bgData);

            this.ruleForm.aterm=new Date(this.ruleForm.aterm)
             this.ruleForm.fterm=new Date(this.ruleForm.fterm)

               console.log(this.ruleForm)
          } else {
            alert("请求失败！");
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    this.company = sessionStorage.name;
  },
  mounted() {
    this.status();
  }
};
</script>

<style lang="scss" scoped>
.wrapper /deep/ .el-upload-list__item-name{
  width: 447px;
}
.yulantext{
  font-size: 10px;
  position: relative;
  top: 47px;
  left:288px;
  z-index: 999;
  color:#409eff;
  cursor:pointer;
}
.wrapper /deep/ .el-upload-list__item /deep/ .el-icon-close-tip {
  display: none!important;
  right: 36px;
}
.tj{
  background-image: linear-gradient(69deg, #cc263f 0%, #f42b47 100%, #ed162d 100%, #e60012 100%), linear-gradient(#e60012, #e60012);
}
.mid_box {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;

  .avatar-uploader {
    margin-right: 20px;
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border: 1.5px dashed #666;
  margin-left: 30px;
  margin-top: 15px;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.box1 {
  width: 127px;
  font-size: 15px;
  margin-top: 20px;
  margin-left: 29px;
  word-wrap: break-word;
  margin-right: 35px;
  text-indent: -4px;
}
.rich {
  z-index: 10;
  width: 100%;
  margin: 30px auto 0px;
  height: 320px;
}
.img-img {
  margin-top: 25px;
  width: 150px;
  height: auto;

  &::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }
}
.wrapper {
  min-width: 1280px;
  box-sizing: border-box;

  .queren {
    z-index: 999;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0%;
    top: 0%;
    background-color: rgba($color: #000, $alpha: 0.56);
    display: flex;
    align-items: center;
    justify-content: center;

    & > div {
      width: 500px;
      height: 400px;
      background: #fff;
      border-radius: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0 100px 0 100px;
      box-sizing: border-box;

      & > span {
        text-align: center;
        width: 120%;
        color: #000;
      }

      & > p {
        font-size: 32px;
        font-weight: 600;
      }

      & > div {
        width: 100%;
        padding: 32px;
        box-sizing: border-box;
        margin: 20px auto 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          font-size: 30px;
          cursor: pointer;
        }
      }
    }
  }

  #box {
    margin: 40px auto 0;
    padding: 34px 32px 100px 28px;
    box-sizing: border-box;
    width: 1200px;
    background-color: #ffffff;

    form {
      .ll {
        margin-top: 80px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        button[type="button"] {
          margin-right: 152px;
          width: 197px;
          height: 63px;
          background-color: #ff9800;
          border-radius: 5px;
          font-family: "MicrosoftYaHei";
          font-size: 26px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 63px;
          letter-spacing: 0px;
          color: #ffffff;
          text-align: center;
          outline: none;
          border: 0;
        }

        button[type="submit"] {
          width: 197px;
          height: 63px;
          background-color: #e60012;
          border-radius: 5px;
          font-family: "MicrosoftYaHei";
          font-size: 26px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 63px;
          text-align: center;
          letter-spacing: 0px;
          color: #ffffff;
          outline: none;
          border: 0;
        }
      }

      .xxx {
        margin-top: 60px;
        width: 100%;
        // height: 72px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;

        .plpl {
          display: flex;
          align-items: center;
          label {
            margin-left: 16px;
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 25px;
            letter-spacing: 0px;
            color: #323232;
          }

          .iconfont {
            font-size: 22px;
            color: #999;
          }
          .ic {
            color: #e60012;
          }
        }

        .xxxx {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          span {
            display: inline-block;
            height: 32px;
            line-height: 32px;
            text-align: center;
            margin-left: 25px;
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #000;
          }

          /deep/ .upload-demo {
            margin-bottom: 10%;
          }

          /deep/ .el-button--primary {
            margin-top: 32px;
            border: none;
            cursor: pointer;
            width: 96px;
            height: 32px;
            border-radius: 4px;
            background-image: linear-gradient(
                69deg,
                #cc263f 0%,
                #f42b47 100%,
                #ed162d 100%,
                #e60012 100%
              ),
              linear-gradient(#e60012, #e60012);
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
          }

          /deep/ .el-upload-list.el-upload-list--text {
            max-height: 100px;
            // overflow-y: scroll;
            width: 581px;

            &::-webkit-scrollbar {
              width: 3px;
              // height: 5px;
            }

            &::-webkit-scrollbar-track-piece {
              background-color: rgba(0, 0, 0, 0.2);
              -webkit-border-radius: 6px;
              border-radius: 6px;
            }

            &::-webkit-scrollbar-thumb:vertical {
              height: 5px;
              background-color: rgba(125, 125, 125, 0.7);
              -webkit-border-radius: 6px;
              border-radius: 6px;
            }

            &::-webkit-scrollbar-thumb:horizontal {
              width: 5px;
              background-color: rgba(125, 125, 125, 0.7);
              -webkit-border-radius: 6px;
              border-radius: 6px;
            }
          }
        }

        .btnn {
          cursor: pointer;
          width: 96px;
          height: 32px;
          background-image: linear-gradient(
              69deg,
              #cc263f 0%,
              #f42b47 100%,
              #ed162d 100%,
              #e60012 100%
            ),
            linear-gradient(#e60012, #e60012);
          background-blend-mode: normal, normal;
          border-radius: 4px;
          display: flex;
          justify-content: center;
          align-items: center;

          label {
            font-family: "MicrosoftYaHei";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
          }
        }
      }

      .xx {
        margin-top: 60px;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;

        textarea {
          margin-top: 30px;
          width: 1139px;
          height: 138px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          resize: none !important;

          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 39px;
          letter-spacing: 0px;
          color: #999999;
        }

        article {
          font-family: "MicrosoftYaHei";
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 39px;
          letter-spacing: 0px;
          color: #999;
        }

        p {
          margin-top: 38px;
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
        }

        h5 {
          width: 100%;
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
        }

        h3 {
          width: 100%;
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
          margin-top: 38px;
        }
      }

      .cc {
        width: 1140px;
        margin: 0 auto 0px;
        aside {
          width: 100%;
          height: 43px;
          div {
            display: flex;
            align-items: center;

            label {
              display: inline-block;
              // width: 101px;
              height: 43px;
              font-family: "MicrosoftYaHei";
              font-size: 16px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 43px;
              text-align: right;
              letter-spacing: 0px;
              color: #323232;
              white-space: nowrap;
            }

            .i-i {
              width: 1009px;
              height: 43px;
              background-color: #ffffff;
              border: solid 1px #c7c7c7;
              outline: none;
              margin-left: 20px;
              font-family: "MicrosoftYaHei";
              font-size: 18px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #323232;
            }
          }
        }
      }

      .btn {
        margin: 60px auto 0;
        width: 230px;
        height: 63px;
        margin-right: 480px;
        background-color: #e60012;
        border-radius: 5px;
        font-family: "MicrosoftYaHei";
        font-size: 26px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 63px;
        letter-spacing: 0px;
        text-align: center;
        color: #ffffff;
      }

      aside {
        width: 1138px;
        height: 43px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;

        label {
          display: inline-block;
          width: 130px;
          height: 43px;
          font-family: "MicrosoftYaHei";
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 43px;
          text-align: right;
          letter-spacing: 0px;
          color: #323232;
          white-space: nowrap;
        }

        select {
          /* 清除默认的箭头样式 */
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
          /* 右侧添加小箭头的背景图 */
          background: url("../../../static/img/xa.png") 360px center no-repeat;
          background-size: 14px 8px;
          width: 386px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          // padding-left: 83px;
          box-sizing: border-box;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }

        input {
          box-sizing: border-box;
          width: 386px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }

        .i {
          width: 151px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }
      }

      section {
        width: 1138px;
        height: 43px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;

        label {
          display: inline-block;
          width: 100px;
          height: 43px;
          font-family: "MicrosoftYaHei";
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 43px;
          text-align: right;
          letter-spacing: 0px;
          color: #323232;
          white-space: nowrap;
        }

        select {
          /* 清除默认的箭头样式 */
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
          /* 右侧添加小箭头的背景图 */
          background: url("../../../static/img/xa.png") 360px center no-repeat;
          background-size: 14px 8px;
          width: 386px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          // padding-left: 83px;
          box-sizing: border-box;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }

        input {
          box-sizing: border-box;
          width: 386px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }

        .i {
          width: 151px;
          height: 43px;
          background-color: #ffffff;
          border: solid 1px #c7c7c7;
          outline: none;
          margin-left: 20px;
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #323232;
        }
      }

      h4 {
        width: 1138px;
        height: 38px;
        font-family: "MicrosoftYaHei";
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
        padding-left: 30px;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
        margin-bottom: 54px;
      }
    }

    .box {
      width: 395px;
      height: 34px;
      margin: 44px auto 70px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        width: 192px;
        height: 34px;
        background-size: 100% 100%;
        font-family: "MicrosoftYaHei";
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 34px;
        text-align: center;
        letter-spacing: 0px;
        color: #333333;
      }

      .color {
        color: #fff;
      }
    }

    h3 {
      width: 89px;
      height: 23px;
      margin: 0 auto;
      font-family: "MicrosoftYaHei";
      font-size: 22px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #333333;
    }
  }

  .footer {
    margin-top: 80px;
  }
}
</style>
